{% extends 'base.html' %}
{% load static %}

{% block title %}
    我的收藏
{% endblock %}

{% block css %}
 <style>
    .table-actions button {
      border: none;
      background: none;
      color: #fe5e74;
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
    }

    .table-actions button:hover {
      color: #dc3545;
    }

    .table-avatar {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: cover;
    }
  </style>
{% endblock %}


{% block content %}
  <!-- section main content -->
    <section class="main-content">
      <div class="container-xl">
        <div class="row gy-4">
          <div class="col-lg-10 mx-auto">
            <!-- section header -->
            <div class="section-header">
              <h3 class="section-title">我的收藏</h3>
              <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave" />
            </div>

            <div class="padding-30 rounded bordered bg-white">
              <div class="table-responsive">
                <table class="table align-middle text-center">
                  <thead class="table-light">
                    <tr>
                      <th>封面</th>
                      <th>标题</th>
                      <th>作者</th>
                      <th>收藏时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody id="favoritesTable">
                  {% for coll_blog in coll_blogs %}
                    <tr>
                          <td>
                              <a href="blog-single.html">
                              <img src="{{ coll_blog.article.fm_image }}" class="table-avatar" alt="">
                              </a>
                          </td>
                          <td>
                              <a href="blog-single.html">{{ coll_blog.article.title }}</a>
                          </td>
                          <td>{{ coll_blog.article.user }}</td>
                          <td>{{ coll_blog.create_time }}</td>
                          <td class="table-actions">
                            <button><i class="icon-close"></i><a href="/user/del/action/{{ coll_blog.id }}">取消收藏</a></button>
                          </td>
                    </tr>
                  {% endfor %}
                  </tbody>
                </table>
                <div id="noFavorites" style="display:none;" class="text-center text-muted py-4">暂无收藏内容</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
{% endblock %}



{% block js %}
 <script>
    function removeFavorite(btn) {
      var row = btn.closest('tr');
      row.parentNode.removeChild(row);
      if (document.querySelectorAll('#favoritesTable tr').length === 0) {
        document.getElementById('noFavorites').style.display = 'block';
      }
    }
  </script>
{% endblock %}







